import React, { PureComponent } from 'react';
import Link from 'umi/link';
import RightContent from '../GlobalHeader/RightContent';
import BaseMenu from '../SiderMenu/BaseMenu';
import styles from './index.less';
import logo from "../../assets/logo.png"

export default class TopNavHeader extends PureComponent {
  state = {
    maxWidth: undefined,
  };

  static getDerivedStateFromProps(props) {
    return {
      maxWidth: (props.contentWidth === 'Fixed' ? 1200 : window.innerWidth) - 280 - 165 - 40,
    };
  }

  render() {
    const { theme, contentWidth } = this.props;
    const { maxWidth } = this.state;
    return (
      <div className={`${styles.head} ${theme === 'light' ? styles.light : ''}`}>
        <div className={styles.headTop}>
          <div className={styles.logo}>
            {/*<img src={logo} alt=""/>*/}
            {/*<span>您的家庭护理专家</span>*/}
          </div>
        </div>
        {/*<div*/}
          {/*ref={ref => {*/}
            {/*this.maim = ref;*/}
          {/*}}*/}
          {/*className={`${styles.main} ${contentWidth === 'Fixed' ? styles.wide : ''}`}*/}
        {/*>*/}
          {/*<div className={styles.left}>*/}
            {/*<div className={styles.logo} key="logo" id="logo">*/}
              {/*<Link to="/">*/}
                {/*<img src={logo} alt="logo" />*/}
                {/*<h1>智慧市场监管平台</h1>*/}
              {/*</Link>*/}
            {/*</div>*/}
            {/*<div*/}
              {/*style={{*/}
                {/*maxWidth,*/}
              {/*}}*/}
            {/*>*/}
              {/*<BaseMenu {...this.props} style={{ border: 'none', height: 64 }} />*/}
            {/*</div>*/}
          {/*</div>*/}
          {/*<RightContent {...this.props} />*/}
        {/*</div>*/}
      </div>
    );
  }
}
